<template>
  <view class="my-page">
    <view class="page-wrapper">
      <view class="profile-card">
        <view class="header">
          <view class="user-info" @tap="handleUserInfoTap">
            <image class="avatar" :src="DEFAULT_IMAGE" mode="aspectFill" />
            <view class="user-info">
              <text class="greeting">{{ userStore.userInfo.user.nickName }}</text>
              <text class="phone">{{ userStore.userInfo.user.phonenumber }}</text>
            </view>
          </view>
          <view class="rules-btn">
            <image class="rules-icon" :src="images.icons.memberRule" mode="aspectFit" />
            <text class="rules-text">会员规则</text>
          </view>
        </view>

        <view class="balance-section">
          <view class="balance-row">
            <text class="balance-label">总资产（元）</text>
            <text class="balance-amount">685.00</text>
          </view>
        </view>

        <view class="progress-section">
          <view class="progress-bar">
            <view class="progress-inner" style="width: 30%"></view>
          </view>
          <view class="bottom-row">
            <view class="level-tag">
              <image class="level-icon" :src="images.icons.memberLevel" mode="aspectFit" />
              <text>白银会员</text>
            </view>
            <text class="upgrade-info">距离黄金会员还差800元</text>
          </view>
        </view>
      </view>
    </view>

    <view class="menu-list">
      <view class="menu-item" v-for="(item, index) in menuList" :key="index" @tap="handleMenuClick(item)">
        <view class="menu-icon-wrapper">
          <image class="menu-icon" :src="item.icon" mode="aspectFit" />
        </view>
        <text class="menu-text">{{ item.text }}</text>
        <view class="arrow-icon"></view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { images, DEFAULT_IMAGE } from "../../config/images";
import { useUserStore } from "../../stores/user";

const userStore = useUserStore();

const handleUserInfoTap = () => {
  uni.navigateTo({
    url: '/pages/my/settings'
  });
};

const menuList = [
  {
    icon: images.icons.myAppointment,
    text: "我的预约",
    path: "/pages/my/myAppointment",
  },
  {
    icon: images.icons.myReminder,
    text: "我的提醒",
    path: "/pages/reminder/index",
  },
  {
    icon: images.icons.myPrivacy,
    text: "隐私条款",
    path: "/pages/privacy/index",
  },
];

const handleMenuClick = (item: any) => {
  uni.navigateTo({
    url: item.path,
  });
};
</script>

<style lang="scss" scoped>
.my-page{
  width:100vw;
  height:100vh;
  background: #F3F3FD;
}
.page-wrapper {
  background: linear-gradient(to bottom, #3a409e, #F3F3FD);
  min-height: 372rpx;
  padding: 20rpx;
}

.profile-card {
  background: linear-gradient(to right, #6f94f6, #4e6ef2);
  border-radius: 16rpx;
  padding: 30rpx;
  margin: 20rpx;
  color: #ffffff;
}

.header {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
  justify-content: space-between;

  .user-info {
    display: flex;
    align-items: center;

    .avatar {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      margin-right: 20rpx;
    }

    .user-info {
      flex: 1;

      .greeting {
        font-size: 32rpx;
        font-weight: 500;
        display: block;
        width: 151rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
      }

      .phone {
        font-size: 24rpx;
        opacity: 0.8;
        display: block;
        margin-top: 4rpx;
      }
    }
  }

  .rules-btn {
    display: flex;
    align-items: center;
    padding: 8rpx 16rpx;
    border-radius: 30rpx;
    font-size: 24rpx;
    margin-left: auto;
    position: relative;
    z-index: 1;
    width: 172rpx;
    height: 44rpx;
    right: -30rpx;

    .rules-icon {
      width: 100%;
      height: 100%;
      margin-right: 4rpx;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 2;
    }

    .rules-text {
      position: relative;
      left: 48rpx;
      z-index: 3;
      font-size: 26rpx;
      color: #ffffff;
    }
  }
}

.balance-section {
  margin: 30rpx 0;

  .balance-row {
    display: flex;
    align-items: baseline;
    gap: 12rpx;
  }

  .balance-label {
    font-size: 26rpx;
  }

  .balance-amount {
    font-size: 48rpx;
    font-weight: bold;
    color: #ffd700;
  }
}

.progress-section {
  position: relative;

  .progress-bar {
    height: 8rpx;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4rpx;
    margin: 16rpx 0;

    .progress-inner {
      height: 100%;
      background: #fff;
      border-radius: 4rpx;
    }
  }

  .bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20rpx;
  }

  .level-tag {
    display: inline-flex;
    align-items: center;
    padding: 6rpx 16rpx;
    border-radius: 30rpx;

    .level-icon {
      width: 32rpx;
      height: 32rpx;
      margin-right: 8rpx;
    }

    text {
      font-size: 24rpx;
      color: #ffffff;
    }
  }

  .upgrade-info {
    font-size: 26rpx;
    opacity: 0.9;
    font-size: 26rpx;
    color: #edcda3;
  }
}

.menu-list {
  background: #ffffff;
  border-radius: 24rpx;
  margin: 20rpx;
  padding: 0 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

  .menu-item {
    display: flex;
    align-items: center;
    padding: 32rpx 0;
    border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);

    &:last-child {
      border-bottom: none;
    }

    .menu-icon-wrapper {
      width: 48rpx;
      height: 48rpx;
      margin-right: 24rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      .menu-icon {
        width: 100%;
        height: 100%;
      }
    }

    .menu-text {
      flex: 1;
      font-size: 28rpx;
      color: #333333;
      font-weight: 500;
    }

    .arrow-icon {
      width: 12rpx;
      height: 12rpx;
      border-top: 2rpx solid #999;
      border-right: 2rpx solid #999;
      transform: rotate(45deg);
      margin-left: 8rpx;
      margin-right: 8rpx;
    }
  }
}
</style>
